
<script setup>
import {onMounted, reactive, ref} from 'vue';
import { ElMessage } from 'element-plus';
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter();
const businessId=ref()
const business=ref({})
// let showbutton=true
// const avatarUrl = ref('');
// const avatar = ref(null);
const formRef=ref(null)


const validateNumber = (rule, value, callback) => {
  if (value === '' || isNaN(value) || Number(value) < 0) {
    callback(new Error('请输入一个大于或等于0的数字'));
  } else {
    callback();
  }
};

const rules = reactive({
  businessName: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
  businessAddress: [{ required: true, message: '请输入门店地址', trigger: 'blur' }],
  businessExplain: [{ required: true, message: '请输入经营类型', trigger: 'blur' }],
  businessImg: [{ required: true, message: '请上传头像', trigger: 'blur' }],
  starPrice: [
    { required: true, message: '请输入起送价', trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' }
  ],
  deliveryPrice: [
    { required: true, message: '请输入配送价', trigger: 'blur' },
    { validator: validateNumber, trigger: 'blur' }
  ]
});

onMounted(()=>{
  businessId.value = router.currentRoute.value.query.businessId
  console.log(businessId)
  getBusinessById()
})

function getBusinessById(){
  axios.get("/admin/getBusinessById",
      {
        params: {
          businessId:businessId.value
        }
  }).then(res=>{

    business.value=res.data
    console.log(business.value)
  })
}

const updateAvatar = (event) => {
  const file = event.target.files[0];
  if (file) {
    const isImage = file.type.startsWith('image/');
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isImage) {
      ElMessage.error('上传的文件必须是图片!');
      return;
    }
    if (!isLt2M) {
      ElMessage.error('上传的图片大小不能超过 2MB!');
      return;
    }


    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      // avatar.value = reader.result; // Base64 编码
      // console.log(avatar.value)
      business.value.businessImg = reader.result; // 用于预览
    };
    reader.onerror = () => {
      ElMessage.error('文件读取失败');
    };

  }
};
const submitForm = async (fr) => {

  if (!fr) return
  await fr.validate(async (valid) => {
    // console.log(valid,666)
    if (valid) {
      axios({
        method: "POST",
        url: '/admin/updateBusinessInfo',
        data: business.value,
      }).then(res => {
        console.log(res);

        ElMessage.success('个人信息已更新！');
      }).catch(error => {
        console.error(error);
        ElMessage.error('更新失败');
      });
    } else {
      ElMessage.error('请填写完整的表单信息');
    }
  });




};
</script>

<template>
  <el-container>
    <div style="width: 80%; display: flex;justify-content: center">
      <el-card style="width: 50%">
        <el-main style="display:flex;justify-content: center;">
          <el-form @submit.prevent="submitForm" label-width="100px" :model="business" ref="formRef">
            <el-form-item label="头像上传" prop="businessImg">
              <el-image
                  :src="business.businessImg"
                  class="image_1"
                  style="border-radius: 3px 3px 0 0"
              >
                <template #error>
                  <div class="error">

                    暂无头像

                  </div>
                </template>
              </el-image>
              <el-button style="margin-left: 20px" @click="$refs.upload.click()">上传头像
                <input
                    ref="upload"
                    style="display: none"
                    name="file"
                    type="file"
                    @change="updateAvatar"
                /></el-button>
            </el-form-item>
            <el-form-item label="门店名称" :label-width="80" prop="businessName">
              <el-input v-model="business.businessName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="门店地址" :label-width="80" prop="businessAddress">
              <el-input v-model="business.businessAddress" autocomplete="off" />
            </el-form-item>
            <el-form-item label="经营类型" :label-width="80" prop="businessExplain">
              <el-input v-model="business.businessExplain" autocomplete="off" />
            </el-form-item>
            <el-form-item label="起送价" :label-width="80" prop="starPrice">
              <el-input v-model="business.starPrice" autocomplete="off"  />
            </el-form-item>
            <el-form-item label="配送价" :label-width="80" prop="deliveryPrice">
              <el-input v-model="business.deliveryPrice" autocomplete="off" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(formRef)">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-card>
    </div>


  </el-container>

</template>



<style scoped>

.image_1 {
  width: 275px;
  height: 260px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.error {
  margin: 100px auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}
</style>
